<template>
  <div class="login-page d-flex align-items-center justify-content-center">
    <div class="login-card glass-card">
      <div class="text-center mb-4">
        <div class="brand-icon mb-2">
          <i class="bi bi-cpu-fill"></i>
        </div>
        <h2 class="login-title">智能银行流水解析系统</h2>
        <p class="login-subtitle">账户登录</p>
      </div>

      <el-form :model="form" :rules="rules" ref="formRef" @keyup.enter="handleLogin">
        <el-form-item prop="username">
          <el-input
            v-model.trim="form.username"
            placeholder="请输入账号"
            autocomplete="username"
            size="large"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            autocomplete="current-password"
            size="large"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-button 
          type="primary" 
          class="w-100 mt-3" 
          size="large"
          :loading="loading"
          @click="handleLogin"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { authApi, type AuthLoginResp } from '@/api/auth.ts'

const router = useRouter()
const loading = ref(false)
const formRef = ref<FormInstance>()

const form = reactive({
  username: '',
  password: ''
})

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9]+$/, message: '账号只能包含字母和数字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

const handleLogin = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const resp: AuthLoginResp = await authApi.login({
          username: form.username,
          password: form.password
        })
        // 存储 token 与 refreshToken
        localStorage.setItem('token', resp.accessToken)
        if (resp.refreshToken) {
          localStorage.setItem('refreshToken', resp.refreshToken)
        }
        ElMessage.success('登录成功')
        router.replace('/')
      } catch (error: any) {
        // 处理登录错误
        console.error('登录失败:', error)
        ElMessage.error(error.message || '登录失败，账号密码不正确')
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style scoped>
.login-page {
  min-height: calc(100vh - 0px);
  padding: 40px 16px;
}

.glass-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 32px;
  backdrop-filter: blur(12px);
}

.brand-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #00d4ff, #8b5cf6);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

.login-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.form-label {
  color: rgba(255, 255, 255, 0.85);
}

.form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

.form-control:focus {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.15);
  background: rgba(255,255,255,0.08);
}

.btn-primary {
  background: linear-gradient(135deg, #00d4ff, #8b5cf6);
  border: none;
}

.btn-primary:disabled {
  opacity: 0.8;
}
</style>